<template>
  <div class="content_body">
    <div class="select_location_wrap" @click="openSelectArea">
      <van-icon name="location-o" class="locatioIcon"/>
      <span class="text">{{currArea}}</span>
    </div>
    <head-top :headTitle="headTitle" searchPage="searchPage" :areaId="requestParam.areaId"></head-top>
    <nav class="msite_nav">
      <div class="swipe_wrap">
        <div v-if="lunbotuList.length">
          <van-swipe :autoplay="3000" indicator-color="white">
            <div>
              <van-swipe-item v-for="(item, index) in lunbotuList" :key="index">
                <img :src="item.imgUrl">
              </van-swipe-item>
            </div>
          </van-swipe>
        </div>
        <div v-else>
          <img src="http://qn.sghappy.com/upload/201903/26/850b5a1327e244e2b7da9e9581921787">
        </div>
      </div>
    </nav>

    <div v-if="shopClassList.length>0" class="shop_swipe_box">
      <van-swipe :loop="false" indicator-color="#F1B04B">
        <van-swipe-item v-for="(item, index) in shopClassList" :key="index">
          <div class="shop_class_item_wrap">
            <div
              class="shop_class_item"
              span="5"
              v-for="(o, j) in item"
              :key="j"
              @click="navTypePage(o)"
            >
              <img :src="o.iconUrl">
              <div class="name">{{o.name}}</div>
            </div>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="shop_list_container">
      <header class="shop_header">
        <svg class="shop_icon">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#shop"></use>
        </svg>
        <span class="shop_header_title">附近商家</span>
      </header>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        @load="onLoad"
      >
        <div class="shoplist_container">
          <ul v-if="shopListArr.length" type="1">
            <van-row class="sort_box" type="flex" justify="center">
              <van-col span="8">
                <span @click="sort(3000)">
                  综合排序
                  <span>
                    <img class="sort_icon" src="../../images/ic_sort.png">
                  </span>
                </span>
              </van-col>
              <van-col span="8">
                <span @click="sort(3003)">
                  销量最高
                  <span>
                    <img class="sort_icon" src="../../images/ic_sort.png">
                  </span>
                </span>
              </van-col>
              <van-col span="8">
                <span @click="sort(3004)">
                  距离最近
                  <span>
                    <img class="sort_icon" src="../../images/ic_sort.png">
                  </span>
                </span>
              </van-col>
            </van-row>
            <router-link
              :to="{path: '/businessDetails', query:{id: item.objId, name: item.name}}"
              v-for="item in shopListArr"
              tag="li"
              :key="item.id"
              class="shop_li"
            >
              <van-row type="flex" justify="center" class="row_box">
                <van-col span="6" class="shop_img_col">
                  <div class="logo_wrap">
                    <img :src="item.logo" class="shop_img">
                    <div class="shop_run" v-if="!item.shopRun">{{item.shopRunStr}}</div>
                  </div>
                </van-col>
                <van-col span="12" class="center_col">
                  <div class="shop_detail_header">
                    <h4 class="shop_title">{{item.name}}</h4>
                  </div>
                  <div>{{item.sendTime?item.sendTime+'送达':'2小时送达'}}</div>
                  <div>
                    <span>起送价{{item.sendPrice}}元</span>
                    <span>|</span>
                    <span>配送费{{item.shippingPrice}}</span>
                  </div>
                </van-col>
                <van-col span="6" class="right_col">
                  <div>{{item.distance?item.distance:'30公里外'}}</div>
                  <div>
                    <span class="score">{{item.score}}分</span>
                    <span>|</span>
                    <span>月售{{item.monthSale}}</span>
                  </div>
                </van-col>
              </van-row>
              <van-row>
                <van-col span="6">&nbsp;</van-col>
                <van-col span="18">
                  <span
                    class="discounts"
                    v-if="item.fullDiscountMoney.length>0"
                  >{{item.fullDiscountMoney.join(',')}}</span>
                </van-col>
              </van-row>
            </router-link>
          </ul>
        </div>
      </van-list>
    </div>

    <van-actionsheet v-model="showAddressSelect" :actions="areaIdArr" @select="onSelectAreaId"/>

    <foot-guide :activeIndex="0"></foot-guide>
  </div>
</template>

<script>
import { mapMutations,mapState } from "vuex";
import headTop from "src/components/header/head";
import footGuide from "src/components/footer/footGuide";
import { getLunBoTu, getTakeOutList, getShopClass } from "src/service/getData";
import { PAGE_SIZE } from "src/config/globalConfiguration";
import { getTXLocation } from "src/service/common";
export default {
  data() {
    return {
      headTitle: "外卖", // msite页面头部标题
      lunbotuList: [], // 食品分类列表
      shopListArr: [],
      loading: false,
      finished: false,
      shopClassList: [], //分类列表
      error: false, //标识请求错误状态
      showAddressSelect: false, //弹出选择地区的列表
      currArea: "浈江区",
      requestParam: {
        pageNo: 0,
        sortType: "",
        pageSize: PAGE_SIZE,
        areaId: "440204"
      },
      areaIdArr: [
        {
          name: "武江区",
          id: "440203"
        },
        {
          name: "浈江区",
          id: "440204"
        },
        {
          name: "曲江区",
          id: "440205"
        },
        {
          name: "始兴县",
          id: "440222"
        },
        {
          name: "仁化县",
          id: "440224"
        },
        {
          name: "翁源县",
          id: "440229"
        },
        {
          name: "乳源瑶族自治县",
          id: "440232"
        },
        {
          name: "新丰县",
          id: "440233"
        },
        {
          name: "乐昌市",
          id: "440281"
        },
        {
          name: "南雄市",
          id: "440282"
        }
      ]
    };
  },
  async beforeMount() {
    
  },
  async mounted() {
    this.initData();
  },
  components: {
    headTop,
    footGuide
  },
  computed: {
    ...mapState(["lat","lng"])
  },
  methods: {
    ...mapMutations(["RECORD_ADDRESS"]),
    initData() {
      this.initLunBoTu();
      this.initShopClass();
    },

    async initLunBoTu() {
      const res = await getLunBoTu();
      if (res.code === "0000" && res.success) {
        this.lunbotuList = res.data;
      }
    },

    async initShopClass() {
      const res = await getShopClass();
      let _slef = this;
      const handleData = data => {
        let arr = [];
        if (data.length > 10) {
          arr = data.slice(0, 10);
          data.splice(0, 10);
          _slef.shopClassList.push(arr);
          handleData(data);
        } else {
          arr = data.slice(0, data.length);
          _slef.shopClassList.push(arr);
        }
      };
      if (res.code === "0000" && res.success) {
        let arr = [...res.data];
        handleData(arr);
        console.log(this.shopClassList);
      }
    },

    async onLoad(sort) {
      let lat ='';
      let lng ='';
      // 获取定位信息
      if(this.lat&&this.lng){
        lat = this.lat;
        lng = this.lng;
      }else{
        try {
          const res = await getTXLocation();
          lat = res.lat;
          lng = res.lng;
          this.RECORD_ADDRESS(res);
        } catch (error) {
          console.log('进来了 try catch error');
        }
      
      }
      console.log('外卖存入state的经度',this.lat);
      this.requestParam.pageNo++;
      this.loading = true;
      this.finished = false;
      const res = await getTakeOutList({
        pageNo: this.requestParam.pageNo,
        sortType: this.requestParam.sortType,
        areaId: this.requestParam.areaId,
        longitude:lng,
        latitude:lat
      });
      let arr = [];
      if (res.code === "0000" && res.success) {
        if (res.data.data.length > 0) {
          arr = [...res.data.data];
          arr.forEach(o => {
            this.shopListArr.push(o);
          });
        }
      } else {
        this.error = true;
      }
      this.loading = false;
      if (arr.length < this.requestParam.pageSize) {
        this.finished = true;
      }
    },
    sort(sortType) {
      this.requestParam.pageNo = 0;
      this.requestParam.sortType = sortType;
      this.shopListArr = [];
      this.onLoad();
    },
    onSelectAreaId(item) {
      // 点击选项时默认不会关闭菜单，可以手动关闭
      this.showAddressSelect = false;
      this.currArea = item.name;
      //调用刷新
      this.requestParam.pageNo = 0;
      this.shopListArr = [];
      this.requestParam.areaId = item.id;
      this.onLoad();
    },
    openSelectArea() {
      this.showAddressSelect = true;
    },
    navTypePage(item) {
      console.log(item);

      this.$router.push({
        path: "/shopTypeList",
        query: {
          areaId: this.requestParam.areaId,
          type: item.objId,
          title: item.name
        }
      });
    }
  },
  watch: {}
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";
.link_search {
  left: px2Rem(16);
  @include wh(px2Rem(18), px2Rem(18));
  @include ct;
}
.msite_title {
  @include center;
  width: 50%;
  color: #fff;
  text-align: center;
  margin-left: px2Rem(-10);
  .title_text {
    @include sc(px2Rem(16), #fff);
    text-align: center;
    display: block;
  }
}
.msite_nav {
  .swipe_wrap {
    @include wh(100%, px2Rem(200));
    img {
      @include wh(100%, px2Rem(200));
    }
  }
}
.shop_swipe_box {
  .shop_class_item_wrap {
    padding: px2Rem(10);
    display: flex;
    flex-flow: wrap;
    background: #fff;
    .shop_class_item {
      font-size: px2Rem(10);
      text-align: center;
      width: 20%;
      img {
        width: px2Rem(45);
      }
      .name {
        margin: px2Rem(8) 0;
      }
    }
  }
}

.food_types_container {
  display: flex;
  flex-wrap: wrap;
  .link_to_food {
    width: 100%;
    @include fj(center);
    figure {
      img {
        margin-bottom: px2Rem(6);
        @include wh(100%, 100%);
      }
      figcaption {
        text-align: center;
        @include sc(px2Rem(11), #666);
      }
    }
  }
}
.shop_list_container {
  margin-top: px2Rem(8);
  border-top: px2Rem(0.5) solid $bc;
  margin-bottom: 50px;
  background-color: #fff;
  .sort_box {
    font-size: px2Rem(10);
    text-align: center;
    margin-bottom: px2Rem(12);
    .sort_icon {
      margin-left: px2Rem(6);
      width: px2Rem(10);
      position: relative;
      height: px2Rem(5);
      top: px2Rem(-2);
    }
  }
  .shop_header {
    .shop_icon {
      fill: #999;
      margin-left: px2Rem(12);
      vertical-align: middle;
      @include wh(px2Rem(12), px2Rem(12));
    }
    .shop_header_title {
      color: #999;
      @include font(px2Rem(11), px2Rem(32));
    }
  }
}

/*列表样式 start********/
.shoplist_container {
  background-color: #fff;
}
.shop_li {
  border-bottom: px2Rem(0.5) solid #f1f1f1;
  padding: px2Rem(4) px2Rem(8);
  font-size: px2Rem(10);
  color: #a7a7a7;
  .discounts {
    border: px2Rem(0.5) solid #e54e38;
    color: #e54e38;
    line-height: 1.5;
    padding: px2Rem(2) px2Rem(3);
    font-size: px2Rem(8);
    display: inline-block;
  }
  .row_box {
    .shop_detail_header {
      .shop_title {
        color: #333;
        padding-top: px2Rem(2);
        @include font(px2Rem(16), px2Rem(11), "PingFangSC-Regular");
        font-weight: 700;
        line-height: 1.5;
      }
    }
    .shop_img_col {
      display: flex;
      align-items: center;
      .shop_img {
        @include wh(px2Rem(80), px2Rem(80));
        margin-right: px2Rem(15);
      }
      .logo_wrap {
        position: relative;
        .shop_run {
          width: px2Rem(80);
          position: absolute;
          color: #fff;
          background-color: rgba(0, 0, 0, 0.6);
          bottom: 1px;
          text-align: center;
          padding: 2px;
        }
      }
    }
    .center_col{
      line-height: 1.8;
    }
    .right_col {
      margin: auto;
      text-align: right;
      line-height: 1.8;
      .score {
        color: #f59d0f;
      }
    }
  }
}
.select_location_wrap {
  position: fixed;
  z-index: 1100;
  top: 2px;
  left: 5px;
  padding: 10px;
  .text {
    font-size: 14px;
  }
  i {
    position: relative;
    top: 3px;
  }
}

.van-actionsheet {
  max-height: 30%;
  overflow-y: auto;
}

/*列表样式 end********/
</style>
